/**
 * 基础配置
 **/
const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
module.exports = {
  stats: 'errors-only',
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "js/[name]_[chunkhash:8].js",
    chunkFilename: "js/[name]_[chunkhash:8].chunk.js",
  },
  resolve: {
    extensions: [".js", ".jsx", ".vue"],
    alias: {
      vue: "vue/dist/vue.esm.js",
      "@": path.resolve("src"),
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.(png|svg|jpg|gif|ico)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 1000, //图片小于1k使用内联
              fallback: "file-loader",
              esModule: false,
              name: "img/[name]_[hash:8].[ext]",
            },
          },
        ],
      },
      {
        test:/\.less$/i,   //使用正则表达式匹配less
        use: [
          {
            loader: "vue-style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "vue-style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
     
      {
        test: /\.scss$/,
        use: [
          {
            loader: "vue-style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      {
        test: /\.sass$/,
        use: [
          {
            loader: "vue-style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "font/[name]_[hash:8].[ext]",
            },
          },
        ],
      },
    ],
  },
  devServer: {
    historyApiFallback: true,
    port: 3000,
  },
  plugins: [new VueLoaderPlugin(),new FriendlyErrorsWebpackPlugin()],
};
